import React from 'react';
import { Link } from 'react-router-dom';
import { Button} from 'element-react';
import { Input } from 'element-react';
import { Table,value,setTime } from 'element-react';
import Top  from '../../top/index.js';
import Nav from '../../nav/index.js';
import './view.css';
import axios from 'axios';
import util from '../../../assets/js/util.js';

class View extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            
            value: '',
            recycleOrderList:[],
            recycleOrderDeliveryList:[],
            imageList:[], //图片
            options:[],
            columns: [
                 {
                     label: "回收品类",
                     prop: "recycleTypeTitle",
                     width: 180
                 },
                 {
                     label: "重量(kg)",
                     prop: "weight",
                     width: 180,
                     render: function(data){
                        return (
                        <span>
                            <span>{data.weight/1000}</span>
                        </span>)
                        }
                    },
                 
                 {
                     label: "金额(元)",
                     prop: "totalPrice",
                     render: function(data){
                        return (
                        <span>
                            <span>{data.totalPrice/100}</span>
                        </span>)
                        }
                 }
            ],
         }
    }

    componentDidMount(){
        var orderNum = this.props.match.params.orderNum;
        // 获取详情数据
        this.getRecycleDetails(orderNum);
    }

    setPayType(type){
        if(type == 1){
            return '现金支付';
        }else if(type == 2){
            return '银行卡转帐';
        }else{
            return '现金支付';
        }
    }
    setOrderStatus(status){
        var res ='';
        switch (status) {
            case 2:
                res='已支付';
                break;
            case 3:
                res='已交货';
                break;
            case 5:
                res='已销售';
                break;
            case 6:
                res='已取消';
                break;
        }
        return res; 
    }

    setTime(value){
        return util.getDateTime(value)
    }

    getRecycleDetails(orderNum) {
        var params = new URLSearchParams();
        params.append('orderNum', orderNum);
        

        axios.post('/count/countranking/selectRecycleDetails',params).then((data) => {
            console.log(data);
            let res = data.data;
			if(res.code == 0){
                let baseImgUrl = res.data.haoleiImageUrl;
                let repic = res.data.imageList;
                let picarr = [];
                for(let i = 0;i < repic.length;i++){
                    picarr.push(baseImgUrl + repic[i]);
                }

                 this.setState({
                     recycleOrderDeliveryList: res.data.recycleOrderDeliveryList,
                     recycleOrderList: res.data.recycleOrderList,
                     imageList:picarr
                 })

			}else{
				alert(res.msg);
			}
		}).catch((e) => {
			console.log(e)
		})
    }

    render() {
        return ( 
            <div className="view_main">
                <Top/>
                <Nav serviceReceive='active'/>
               <div className="con">
                    <div className="top_line">
                        <div className="top_icon">
                           <span className="bg_1"></span>
                        </div>
                        <span className="look">查看</span>
                        {/*<span type = "info" className="return1"> 
                           <Link to="../serviceHouseReceive">返回</Link>
                        </span>*/}
                    </div>
                    <div className="cont">
                         <div> 
                            <span className="left">
                                <Input prepend="分站" value={this.state.recycleOrderList.substationName}/>
                            </span>
                            <span className="right">
                                <Input prepend="服务亭" value={this.state.recycleOrderList.nickName}/>
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="订单编号" value={this.state.recycleOrderList.orderNum}/>
                            </span>
                            <span className="right">
                                <Input prepend="回收员工" value={this.state.recycleOrderList.operatorName} />
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="回收时间" value={this.setTime(this.state.recycleOrderList.ctime)} />
                            </span>
                            <span className="right">
                                <Input prepend="支付时间" value={this.setTime(this.state.recycleOrderList.payTime)}/>
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="客户手机号" value={this.state.recycleOrderList.userMobile} />
                            </span>
                            <span className="right">
                                <Input prepend="支付金额(元)" value={this.state.recycleOrderList.recyclePrice/100}/>
                            </span>
                            
                         </div>
                         <div> 
                            <span className="left">
                                <Input prepend="支付方式" value={this.setPayType(this.state.recycleOrderList.payType)}/>
                            </span>
                            <span className="right">
                                <Input prepend="订单状态" value={this.setOrderStatus(this.state.recycleOrderList.status)}/>
                            </span>
                            
                         </div>
                    </div>
                    <div className="table">
                          <Table
                            style={{width: '100%'}}
                            columns={this.state.columns}
                            data = {this.state.recycleOrderDeliveryList}
                            border={true}
                            onSelectChange={(selection) => { console.log(selection) }}
                            onSelectAll={(selection) => { console.log(selection) }}
                          />
                    </div>
                    
                    <div className="photo">
                        {
                            this.state.imageList.map(
                                function(item,index){
                                    return <img src={item} className="checkimg"/>
                                }.bind(this)
                            )
                        }
                    </div>

                   
               </div>
            
             </div>
        );
    }
}

export default View